<style>
    /*订单显示*/
    .item{ width:270px; height:135px; border:1px solid #ccc; padding:5px;border-radius:5px;float:left;margin:5px;}
    .item .tags{width:20px;float:left;text-align:center;}
    .item .pic{width:100px; float:left;text-align:center;}
    .item .pic img{max-width:100px; max-height:135px;border-radius:5px;}
    .item .text{width: 150px;text-align:left;float: right;}
    .text-item{width: 100%;}
    .clear{clear:both;}
    .layui-btn-small {
        height: 20px;
        line-height: 20px;
        padding: 0 5px;
        font-size: 12px;
    }
    .small-table{margin: 0; }
    .small-table td{padding: 4px;font-size: 10px}
    .totaldata_tag{
        margin: 20px 10px;
    }
    .totaldata_tag a{color:#0033CC;
        text-decoration:underline;}
    .totaldata_tag a:active {
        color:#D200D2;
        text-decoration:none;
    }
</style>
<div class="page-toolbar">
    <div class=" fixed-bar">
                <form class="layui-form layui-form-pane fixed-bar-form" action="{:url()}" method="get" id="hisi-table-search">
            <div class="layui-form-item">
                <div class="layui-inline removeStat">
                    <label class="layui-form-label">主题</label>
                    <div class="layui-input-inline">
                        <select name="themes" lay-filter="themes">
                            {foreach $themes as $k=>$v}
                            <option value="{$k}" {if $k == $this_themes} selected {/if} >{$v}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-inline removeStat">
                    <label class="layui-form-label">日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="create_date_range" value="{$create_date_range}" readonly="" id="create_date_range" lay-verify="" placeholder="选择下单日期" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline removeStat">
                    <label class="layui-form-label">单位</label>
                    <div class="layui-input-inline">
                        {:Form::select('unit', 'day', ['day'=>'天','week'=>'周','month'=>'月'], '', '')}
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" id="seacher" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
                    <a href="{:url('mp/BreakCode/index')}" class="hisi-iframe onclickReturnGoods-hisi-iframe  layui-btn layui-btn-primary  " hisi-data="{width: '1260px', height: '300px'}" > 数据明细</a>
                    <!--                    <a href="{:url('mp/BreakCode/metaAnalysis')}" class="hisi-iframe onclickReturnGoods-hisi-iframe  layui-btn layui-btn-primary  " hisi-data="{width: '1260px', height: '300px'}" > 汇总分析</a>-->
                </div>
            </div>
    </div>
</div>
<div class="totaldata_tag">
    快捷筛选：<a onclick="searchdate('{$searchdate[1]} ~ {$searchdate[2]}',this)" href="#">近7天</a>&nbsp;&nbsp;
    <a onclick="searchdate('{$searchdate[3]} ~ {$searchdate[4]}',this)" href="#">近30天</a>&nbsp;&nbsp;
    <a onclick="searchdate('{$searchdate[5]} ~ {$searchdate[6]}',this)" href="#">近三月</a>&nbsp;&nbsp;
    <a onclick="searchdate('{$searchdate[7]} ~ {$searchdate[8]}',this)" href="#">近半年</a>&nbsp;&nbsp;
</div>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="xiaohuihui_3" style="min-width:400px;height:400px"></div>
<div id="minguifang_3" style="min-width:400px;height:400px"></div>
<div id="all_3" style="min-width:400px;height:400px"></div>
{include file="system@block/layui" /}
<script src="__PUBLIC_JS__/jquery.2.1.4.min.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/xm-select/dist/xm-select.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/vue@3.2.26/dist/vue.global.js"></script>
<script src="__PUBLIC_JS__/Highcharts@9.3.2/code/highcharts.js"></script>
<script src="__PUBLIC_JS__/Highcharts@9.3.2/code/modules/exporting.js"></script>
<!--<script src="https://cdn.highcharts.com.cn/highcharts/modules/series-label.js"></script>-->
<script src="__PUBLIC_JS__/Highcharts@9.3.2/code/modules/oldie.js"></script>
<script src="__PUBLIC_JS__/Highcharts@9.3.2/code/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="{$this_themes_url}"></script>
<script type="text/javascript">
    var public_js='__PUBLIC_JS__';
    var ajax_data={};
    layui.use([ 'element', 'layer', 'laytpl', 'tool','laydate','table','form'], function() {
        var element = layui.element;
        var layer = layui.layer;
        // var $ = layui.jquery;
        var form = layui.form;
        var laytpl = layui.laytpl,laydate=layui.laydate ,table = layui.table;
        form.on('submit(demo1)', function (data) {
            //表单数据formData
            var formData;
            formData = data.field;
            getOrders(formData);
        });
        getOrders($('#hisi-table-search').serialize());

        laydate.render({
            elem: '#create_date_range'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#create_date_range').val(value);
                $('#layui-laydate1').remove();//关闭面板
            }
        });

        //自定页
        window.searchdate = function(date,_this) {
            $("input[name=create_date_range]").val(date);
            var url='{:url()}';
            $("#hisi-table-search").attr('action',url)
            $("#seacher").click();
            $('.totaldata_tag a').attr('style',"");
            $(_this).attr('style',"color:#D200D2;");
            form.render();
        }

        form.on('select(themes)', function(data){
            getOrders($('#hisi-table-search').serialize());
            // var themes_js='{:get_domain()}'+public_js+"/Highcharts@9.3.2/code/themes/"+data.value;
            // $.ajax({
            //     url: themes_js,
            //     dataType: "script",
            //     success: function (res) {
            //         showchart(ajax_data);
            //     }
            // });
        })
    });
var this_themes='{$this_themes}';
    function getOrders(data){
        $.ajax({
            type: "POST",
            url: "{:url('mp/BreakCode/statistics')}",
            data: data,
            dataType:"json",
            success: function(res){
                if($('[name="themes"]').val()!=this_themes){
                    location.href= "{:url('mp/BreakCode/statistics')}"+"?"+data;
                }
                ajax_data=res;
                showchart(ajax_data);
            }
        });
    }
    function showchart(res) {
        res.data.xiaohuihui_3.tooltip.pointFormatter=function() {
            return '<span style="color: '+ this.series.color + '">\u25CF</span> '+
                this.series.name+': <b>'+ this.y +'</b>%'
        };
        res.data.minguifang_3.tooltip.pointFormatter=function() {
            return '<span style="color: '+ this.series.color + '">\u25CF</span> '+
                this.series.name+': <b>'+ this.y +'</b>%'
        };
        res.data.all_3.tooltip.pointFormatter=function() {
            return '<span style="color: '+ this.series.color + '">\u25CF</span> '+
                this.series.name+': <b>'+ this.y +'</b>%'
        };
        var chart_xiaohuihui_3 = Highcharts.chart('xiaohuihui_3', res.data.xiaohuihui_3);
        var chart_minguifang_3 = Highcharts.chart('minguifang_3', res.data.minguifang_3);
        var chart_all_3 = Highcharts.chart('all_3', res.data.all_3);
    }
</script>